/* start .main-section */
@media screen{
    .main-section{
        min-height:calc(100vh - 82px - 104px);
    }
}

@media print{
    a{
        text-decoration: none !important;;
    }
}

@media screen and (max-width: 480px){
    .hide-in-phone{
        display: none;
    }
}

/* @font-face {
    font-family: 'Cairo';
    src: url('/css/cairo/static/Cairo-Regular.ttf') format('truetype');
} */

:root {
    --purple-main: #6c5ce7;
    --purple-light: #a29bfe;
    --purple-dark: #4834d4;
    --purple-muted: #5f27cd;
    --purple-hover: #7d5fff;
    --purple-disabled: #686de0;


    /* bs colors var
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color); */

}

.bi{
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}

.bs-theme-box{
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

body{
    font-family: 'Al Jazeera Arabic';
}

/* body{
    font-family: 'Cairo', sans-serif;
} */

a:hover{
    text-decoration: none;
}

/* مؤشر الماوس */
.cursor-pointer{
    cursor: pointer;
}

/* اخفاء اسهم الزيادة والنقصان */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
input[type=number] {
    /* Set some optional styles for the input field */
    appearance: none;
    -moz-appearance: textfield;
}

/* balloon */
.balloon-info{
    --balloon-color: #17a2b8!important;
    --balloon-font-size: 16px;
}

/* pagenatore */
.page-link:focus {
    background-color: white;
    box-shadow: none;
}

/* user photo */
.personal-image {
    text-align: center;
}
.personal-image input[type="file"] {
    display: none;
}
.personal-figure {
    position: relative;
    width: 150px;
    height: 150px;
}
.personal-avatar {
    cursor: pointer;
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    border-radius: 100%;
    border: 2px solid transparent;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
    transition: all ease-in-out .3s;
}
.personal-avatar:hover {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
}
.personal-figcaption {
    cursor: pointer;
    position: absolute;
    top: 0px;
    width: inherit;
    height: inherit;
    border-radius: 100%;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: all ease-in-out .3s;
}
.personal-figcaption:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, .5);
}
.personal-figcaption > img {
    margin-top: 70px;
    width: 50px;
    height: 50px;
}

/* start first offcanvas */
#firstOffcanvas li{
    border-left: 0;
    border-right: 0;
    border-color: #ffffff93;
    font-size: 1.1rem;
}
#firstOffcanvas a{
    text-decoration: none;
}
/* end first offcanvas */

/* start Offcanvas social-media row */
.social a{
    font-size: 23px;
    font-weight: bold;
    color: var(--purple-main);
    margin: 0px 2px 2px;
    text-decoration: none;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 1.7em;
    border: 3px solid var(--purple-main);
    transition: all .2s ease-in-out;
    border-radius: 50%;
    text-align: center;
}
.social a:hover{
    background-color: var(--purple-main);
    color: white;
    border-radius: 4px;
}
/* end Offcanvas social-media row */

/* خلايا الجدول */
.td-main-bg-color tr td{
    background-color: var(--purple-main)!important;
    color: white;
}

/* start to top scroll button */
#scroll-top{
    width: 40px;
    height: 40px;
    color: var(--purple-light);
    text-align: center;
    position: fixed;
    right: 15px;
    bottom: 25px;
    z-index: 100;
    cursor: pointer;
    opacity: 0.5;
    display: none;

}
#scroll-top:hover{
    opacity: 1;
    color: var(--purple-dark);
    transition: all .2s ease-in-out;
}

/* end to top scroll button */

/* general */

/* اضهار كلمة المرور */
.show-password{
    position: relative;
}
.show-password a{
    position: absolute;
    top: 1px;
    left: 10px;
    font-size: large;
    font-weight: bold;
    color: var(--purple-main);
    z-index: 10;
}
/* نهاية اضهار كلمة المرور */

/* start scroll bar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}
/* end scroll bar */

/* التدوير 180 */
.rotate-180{
    transform: rotate(180deg);
}
.flip-horizontal {
    transform: scaleX(-1);
}

.main-page-nav-icon-col{
    min-height: 100px;
    text-align: center;
    border: dotted 2px var(--purple-main);
}
.main-page-nav-icon-col a{
    font-size: 20px;
}

/* الالوان الرئيسية */
.main-color{
    color: #003a72;
}
.main-color-h:hover{
    color: #003a72;
    transition: all .2s ease-in-out;
}

.main-bg-color{
    background-color: #003a72;
}
.main-bg-color-h:hover{
    background-color: #003a72 !important;
    transition: all .2s ease-in-out;
}

.second-color{
    color: #ffc107!important;
}
.second-color-h:hover{
    color: #ffc107!important;
    transition: all .2s ease-in-out;
}
.white-color-h:hover{
    color: white!important;
    transition: all .2s ease-in-out;
}

/* end general */

/* start select2 lyp */

.select2-dropdown {
    z-index: 1056;
}
.select2-container{
    display: block;
    color: #444;
}
.select2-results__options{
    text-align: right!important;
    background-color: var(--bs-body-bg)!important;
    color: var(--bs-body-color)!important;
    font-weight: bold;
    text-align: center!important;
}

.select2-results__option--selected, .select2-results__option--highlighted{
    color: white!important;
    background-color: var(--purple-dark)!important;
}
.select2-results__option--selected{
    border-top: 1px solid #888!important;
    border-bottom: 1px solid #888!important;
}
.select2-selection{
    min-height: 37px!important;
    background-color: var(--bs-body-bg)!important;
}
.select2-selection__rendered{
    line-height: 36px!important;
    font-weight: bold;
    color: var(--bs-body-color)!important;
}
.select2-search__field{
    min-height: 28px;
    background-color: var(--bs-body-bg)!important;
}

.my-form-select2 .select2-selection{
    text-align: center;
    height: 57px;
    padding-top: 10px;
}

/* end select2 lyp */

/* Start tosatr js */

/* تنسيق الالرت */
/* toast-success */
.toast-success .toast-progress {
    background-color: white;
    opacity: 1!important;
}

.toast-success{
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    background-color: var(--purple-dark)!important;
    margin-top: 45px!important;
}
/* toast-error */
.toast-error .toast-progress {
    background-color: white;
    opacity: 1!important;
}

.toast-error{
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    width: 340px!important;
    margin-top: 45px!important;
}
/* toast-warning */
.toast-info .toast-progress {
    background-color: white;
    opacity: 1!important;
}

.toast-info{
    text-align: right;
    font-weight: bold;
    font-size: 16px;
    width: 340px!important;
    margin-top: 45px!important;
}
/* end tosatr js */

.text-break{
    word-break: break-word;
}

.ck-balloon-panel_with-arrow{
    z-index: 1200!important;
    display: block;
    direction: ltr;
}

/* start my-data-table */
.table-layer{
    z-index: 2;
    opacity: 0.4;
}
.table-responsive{
    white-space: nowrap;
}
/* thead tr th{
    background-color: var(--purple-main)!important;
    color: white;
} */
.tr-th th{
    background-color: var(--purple-main)!important;
    color: white;
}
.thead-tr-th tr th{
    background-color: var(--purple-main)!important;
    color: white!important;
}
td, th{
    text-align: center!important;
    vertical-align: middle!important;
}
.td-width-75-150{
    min-width:75px;
    max-width:150px;
    white-space: normal;
}
.td-width-200-300{
    min-width:200px;
    max-width:300px;
    white-space: normal;
}

/* end my-data-table */

/* end .main-section */

/* hmportant: */
.second-color-th-important th{
    color: #ffc107!important;
}
.white-color-th-important th{
    color: white!important;
}

/* new style */
.theme-transition {
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}


/* Text Colors */
.text-purple { color: var(--purple-main) !important; }
.text-purple-light { color: var(--purple-light) !important; }
.text-purple-dark { color: var(--purple-dark) !important; }
.text-purple-muted { color: var(--purple-muted) !important; }
.text-purple-hover {
    transition: color 0.2s ease-in-out; /* Smooth transition effect */
}
.text-purple-hover:hover { color: var(--purple-hover) !important; }
.text-purple-disabled { color: var(--purple-disabled) !important; }

.text-purple-last span {
    color: var(--purple-main) !important;
}

.text-purple-first span {
    color: var(--purple-main) !important;
}

/* Background Colors */
.bg-purple { background-color: var(--purple-main) !important; transition: background 0.3s ease;}
.bg-purple-light { background-color: var(--purple-light) !important; transition: background 0.3s ease;}
.bg-purple-dark { background-color: var(--purple-dark) !important; }
.bg-purple-muted { background-color: var(--purple-muted) !important; }
.bg-purple-hover:hover { background-color: var(--purple-hover) !important; }
.bg-purple-light-hover:hover { background-color: var(--purple-light) !important; }
.bg-purple-dark-hover:hover { background-color: var(--purple-dark) !important; color: white; transition: background 0.3s ease;}
.bg-purple-disabled { background-color: var(--purple-disabled) !important; }

/* Border Colors */
.border-purple { border-color: var(--purple-main) !important; }
.border-purple-light { border-color: var(--purple-light) !important; }
.border-purple-dark { border-color: var(--purple-dark) !important; }
.border-purple-muted { border-color: var(--purple-muted) !important; }
.border-purple-hover:hover { border-color: var(--purple-hover) !important; }
.border-purple-disabled { border-color: var(--purple-disabled) !important; }

/* Button Colors */
.btn-purple {
color: #fff;
background-color: var(--purple-main);
border-color: var(--purple-main);
}

.btn-purple:hover {
color: #fff;
background-color: var(--purple-hover);
border-color: var(--purple-hover);
}

.btn-purple:disabled,
.btn-purple.disabled {
color: #fff;
background-color: var(--purple-disabled);
border-color: var(--purple-disabled);
}

.btn-purple-gradient {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-main), var(--purple-hover)); /* gradient background */
    border: 1px solid transparent; /* optional for border consistency */
}

.btn-purple-gradient:hover {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-main)); /* reverse gradient on hover */
    border: 1px solid transparent; /* optional */
}

.btn-purple-gradient-dark {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-dark), var(--purple-hover)); /* gradient background */
    border: 1px solid transparent; /* optional for border consistency */
}

.btn-purple-gradient-dark:hover {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-dark)); /* reverse gradient on hover */
    border: 1px solid transparent; /* optional */
}

.btn-purple-gradient:disabled,
.btn-purple-gradient.disabled {
    color: #fff;
    background: linear-gradient(45deg, var(--purple-disabled), var(--purple-disabled)); /* single color gradient for disabled state */
    border: 1px solid transparent; /* optional */
}

/* Outline Button Styles */
.btn-outline-purple {
    color: var(--purple-main);
    border: 1px solid var(--purple-main);
    background-color: transparent;
    transition: background 0.3s ease;
}

.btn-outline-purple:hover {
    color: #fff;
    background-color: var(--purple-dark);
    border-color: var(--purple-dark);
    transition: background 0.3s ease;
}

.btn-outline-purple:focus,
.btn-outline-purple.focus {
    color: #fff;
    background-color: var(--purple-main);
    border-color: var(--purple-main);
    box-shadow: 0 0 0 0.2rem rgba(108, 92, 231, 0.5);
}

.btn-outline-purple.disabled,
.btn-outline-purple:disabled {
    color: var(--purple-disabled);
    background-color: transparent;
    border-color: var(--purple-disabled);
}

.btn-outline-purple:active,
.btn-outline-purple.active,
.show > .btn-outline-purple.dropdown-toggle {
    color: #fff;
    background-color: var(--purple-dark);
    border-color: var(--purple-dark);
}

.btn-outline-purple:active:focus,
.btn-outline-purple.active:focus {
    box-shadow: 0 0 0 0.2rem rgba(72, 52, 212, 0.5);
}

/* Gradient Backgrounds */
.bg-purple-gradient {
    background: linear-gradient(45deg, var(--purple-main), var(--purple-light)) !important;
}

.bg-purple-gradient-hover:hover {
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-light)) !important;
}
.bg-purple-gradient-dark {
    background: linear-gradient(45deg, var(--purple-main), var(--purple-dark)) !important;
}

.bg-purple-gradient-dark-hover:hover {
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-dark)) !important;
}

/* Utility Opacity */
.opacity-purple { opacity: 0.75; }
.opacity-purple-hover:hover { opacity: 1; }

/* Link Colors */
.link-purple { color: var(--purple-main) !important; }
.link-purple:hover { color: var(--purple-hover) !important; }


/* nav-selected */

.nav-selected{
    background: linear-gradient(45deg, var(--purple-hover), var(--purple-dark));
    color: white;
}

/* بليس هولدر حقول الادخال */
.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after{
    background-color: transparent;
}